import {
  Draggable,
  DraggableProps,
  Droppable,
  DroppableProps,
} from "react-beautiful-dnd";
import React, { ReactNode } from "react";

type DropProps = Omit<DroppableProps, "children"> & {
  children: ReactNode;
} & React.HTMLAttributes<HTMLDivElement>;

export const Drop = ({ children, style, ...props }: DropProps) => {
  return (
    <Droppable {...props}>
      {(provided) => (
        <div ref={provided.innerRef} style={style} {...provided.droppableProps}>
          {children}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
};

type DragProps = Omit<DraggableProps, "children"> & {
  children: ReactNode;
} & React.HTMLAttributes<HTMLDivElement>;

export const Drag = ({ children, style, ...props }: DragProps) => {
  return (
    <Draggable {...props}>
      {(provided) => {
        const customizedStyle = { ...style, ...provided.draggableProps.style };
        return (
          <div
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            style={customizedStyle}
          >
            {children}
          </div>
        );
      }}
    </Draggable>
  );
};
